<template>
  <div>
    <div class="header-box">找场地就找场地牛牛~</div>

    <div class="flex-container">
      <el-card class="full-width-card">
        <div>
          <el-container>
            <el-header height="30px"></el-header>
            <el-container>
              <el-aside width="150px" class="touxiang"
                ><div >
                  <el-image src="src\assets\R-C.gif"></el-image></div
              ></el-aside>
              <el-main class="xinxi"
                ><h2 style="font-size: 200%">xxxxxxx 上午好~</h2>
                <h5>&nbsp;&nbsp;190****0087 &nbsp;|&nbsp;初级VIP</h5></el-main
              >
            </el-container>
          </el-container>
        </div>
      </el-card>
    </div>



    <div class="flex-container">
      <el-card class="full-width-card">
        <div>
          <el-container>
            <el-header height="30px"></el-header>
            <el-container>
              <el-aside width="150px" class="touxiang"
                ><div >
                  <el-image src="src\assets\R-C.gif"></el-image></div
              ></el-aside>
              <el-main class="xinxi"
                ><h2 style="font-size: 200%">还没想好放什么</h2>
                <h5>可以做个订单管理</h5></el-main
              >
            </el-container>
          </el-container>
        </div>
      </el-card>
    </div>
  </div>


    <el-container>
    <el-aside>
    <el-aside
      :style="{ width: asideWidth }"
      style="
        height: 50%;
        background-color: #e65c75;
        position: relative;
        top: 78px;
      "
    >
      <div
        style="
          height: 60px;
          color: white;
          display: flex;
          align-items: center;
          justify-content: center;
        "
      >
        <img
          src="@/assets/logo.png"
          style="width: 40px; height: 40px; margin-right: 10px"
        />
        <span class="logo-title" v-show="!isCollapse"><h5>个人中心</h5></span>
      </div>

      <el-menu
        :collapse="isCollapse"
        :collapse-transition="false"
        background-color="#001529"
        text-color="#646464"
        style="border: none"
        router
        :default-active="$route.path"
        class="el-menu-vertical-demo"
        @open="handleOpen"
        @close="handleClose"
        active-text-color="#001529"
      >
        <!--router属性实现跳转 -->
        <el-menu-item index="/" style="height: 100%; background-color: #ffffff">
          <el-icon><House /></el-icon>
          <span>首页</span>
        </el-menu-item>

        <el-menu-item
          index="/user"
          style="height: 50%; background-color: #ffffff"
        >
          <el-icon><document /></el-icon>
          <span>订单管理</span>
        </el-menu-item>
        <el-menu-item
          index="/user"
          style="height: 50%; background-color: #ffffff"
        >
          <el-icon><User /></el-icon>
          <span>用户管理</span>
        </el-menu-item>
        <el-menu-item index="4" style="height: 50%; background-color: #ffffff">
          <el-icon><Setting /></el-icon>
          <span>设置</span>
        </el-menu-item>
      </el-menu>
    </el-aside>
    </el-aside>

    <el-main>Main</el-main>
</template>

<script setup>
import { ref, onMounted } from "vue";
import axios from "axios";

const user = ref(JSON.parse(localStorage.getItem("honey-user") || "{}"));
const notices = ref([]);
const activeName = ref(0);

const loadNotice = async () => {
  try {
    const request = getRequestInstance();
    if (request && typeof request.get === "function") {
      const res = await request.get("/notice/selectUserData");
      notices.value = res.data;
    } else {
      console.error(
        "Request instance is undefined or request.get is not a function"
      );
    }
  } catch (err) {
    console.error("Failed to load notices:", err);
  }
};

const getRequestInstance = () => {
  // 假设这里有一个方法可以获取到request实例
  return axios;
};

onMounted(() => {
  loadNotice();
});
</script>

<style scoped>
.header-box {
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  padding: 10px 20px;
  border-radius: 5px;
  margin-bottom: 10px;
}

.flex-container {
  display: flex;
  margin: 15px 0;
}

.full-width-card {
  width: 100%;
}

.half-width-card {
  width: 50%;
  margin-right: 10px;
}

.button-group {
  margin-top: 20px;
}

.title {
  margin-bottom: 15px;
  font-size: 20px;
  font-weight: bold;
}

.collapse-title {
  display: flex;
  align-items: center;
  width: 100%;
}

.collapse-title h4 {
  flex: 1;
}

.collapse-title .time {
  width: 150px;
  color: #888;
}

.touxiang {
  position: relative;
  top: px;
  left: 150px;
}
.xinxi{
    position: relative;
  top: -20px;
  left: 180px;
}
</style>


<style>
.el-menu--inline .el-menu-item {
  background-color: #e65c75;
}
/* .el-sub-menu__title {
   color: #001121   ;
           } */
.el-menu-item:hover,
.el-sub-menu__title:hover {
  color: #e65c75;
}
.el-sub-menu__title:hover i {
  color: #e65c75;
}
.el-menu-item.is-active {
  background-color: #fff0f5;
}
.el-sub-menu__title.is-active {
  background-color: #fff0f5;
}
.el-sub-menu:hover .el-sub-menu__title {
  background-color: #fff0f5;
}
.el-menu-item:hover {
  background-color: #fff0f5;
}

.logo-title {
  margin-right: 20px;
  font-size: 20px;
  transition: all 0.5s;
}
</style>
